<template>
    <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <div class="common-table">
            <div class="small-table" :style="{height: flexHeight }">
                <el-table 
                    :height="tableData.data.height"
                    :border="tableData.data.border"
                    :data="tableData.data.rowData"
                    @selection-change="handleSelectionChange"
                    :default-sort="tableData.data.defaultsort">
                    <el-table-column
                        v-if="tableData.data.checkbox"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column v-if="tableData.data.expandData" type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="tableExpand">
                                <el-row :gutter="20">
                                    <el-col
                                        v-for="(formitem,key) in tableData.data.expandData"
                                        :key="key"
                                        :span="12">
                                        <el-form-item :label="formitem.name + ':'">
                                            <el-tooltip
                                                :enterable="false"
                                                :content="(props.row[key] && props.row[key] + '') || '--'" placement="top">
                                                <div class="table-inline">{{ props.row[key] || '--' }}</div>
                                            </el-tooltip>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column 
                        v-for="item in tableData.data.columns"
                        :prop="item.prop"
                        :label="item.label"
                        :key="item.label"
                        :sortable="item.sortable"
                        :sort-method="item.sortFun ? sortMethod : null"
                        :formatter="formatterData"
                        :filters="item.filter ? item.filterStatus : null"
                        :filter-method="item.filter ? filterHandler : null">
                        <template slot-scope="scope">
                            <span
                                v-if="item.operation === true"
                                v-for="(rowBtnItem,index) in tableData.data.rowBtn"
                                :key="index">
                                <el-button
                                    @click.native="rowBtnClick(scope.row,rowBtnItem.eName)" 
                                    :type="rowBtnItem.btnType" 
                                    :size="rowBtnItem.btnSize" 
                                    :round="rowBtnItem.btnRound" 
                                    :circle="rowBtnItem.btnCircle" 
                                    :loading="rowBtnItem.btnLoading" 
                                    :disabled="rowBtnItem.btnDisabled"
                                    :icon="rowBtnItem.iconLeft" 
                                    class="btnmargin">
                                    {{rowBtnItem.btnContent}}<i class="el-icon--right" :class="rowBtnItem.iconRight"></i>
                                </el-button>
                            </span>
                            <span>
                                {{scope.row[item.prop]}}
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'tablecmpt',
    props: {
        full: Boolean,
        datas:{
            type: Object,
            default() {
                return {
                    attr_data_conf: {
                        columns: [ // 表头
                            { 
                                label: "时间", 
                                prop: "date", 
                                sortable: true, 
                                sortFun: false,
                                filter: true, 
                                filterStatus: [
                                    {text: '2016', value: '2016'}, 
                                    {text: '2017', value: '2017'}, 
                                    {text: '2018', value: '2018'}, 
                                    {text: '2019', value: '2019'}
                                ],
                                operation: false
                            },
                            { 
                                label: "姓名", 
                                prop: "name", 
                                sortable: false, 
                                sortFun: false,
                                filter: true, 
                                filterStatus: [
                                    {text: '张西', value: '张西'}, 
                                    {text: '张明朗', value: '张明朗'}, 
                                    {text: '罗晓磊', value: '罗晓磊'}, 
                                    {text: '李岩', value: '李岩'}, 
                                    {text: '张灏之', value: '张灏之'}
                                ],
                                operation: false
                            },
                            { 
                                label: "性别", 
                                prop: "sex", 
                                sortable: false, 
                                sortFun: false,
                                operation: false
                            },
                            { 
                                label: "地址", 
                                prop: "address", 
                                sortable: false, 
                                sortFun: false,
                                operation: false
                            },
                            { 
                                label: "分数", 
                                prop: "grade", 
                                sortable: true, 
                                sortFun: true,
                                operation: false
                            },
                            { 
                                label: "操作", 
                                prop: "operation", 
                                sortable: false, 
                                sortFun: false,
                                operation: true
                            }
                        ],
                        expandData:{ // 展开行数据
                            hobby:{
                                name:'爱好',
                                id:'fsafui432lfka'
                            },
                            height:{
                                name:'身高',
                                id:'f3qfyfr789wq'
                            },
                            weight:{
                                name:'体重',
                                id:'fhasiohf3fpu'
                            },
                            from:{
                                name:'籍贯',
                                id:'fsf98q8fosa'
                            }
                        },
                        rowData: [ // 表格数据
                            {
                                date: '2018',
                                name: '张西',
                                sex: '男',
                                address: '西安市高新区',
                                from:'中国北京中国北京中国北京中国北京中国北京中国北京中国北京中国北京中国北京中国北京中国北京中国北京',
                                height:'183cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:98
                            },
                            {
                                date: '2015',
                                name: '张明朗',
                                sex: '男',
                                address: '西安市灞桥区',
                                from:'中国',
                                height:'182cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:78
                            },
                            {
                                date: '2017',
                                name: '李岩',
                                sex: '男',
                                address: '西安市长安区',
                                from:'中国',
                                height:'181cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:68
                            },
                            {
                                date: '2019',
                                name: '张灏之',
                                sex: '男',
                                address: '西安市长安区',
                                from:'中国',
                                height:'180cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:84
                            },
                            {
                                date: '2014',
                                name: '罗晓磊',
                                sex: '男',
                                address: '西安市雁塔区',
                                from:'中国',
                                height:'179cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:67
                            },
                            {
                                date: '2017',
                                name: '张明朗',
                                sex: '男',
                                address: '西安市灞桥区',
                                from:'中国',
                                height:'178cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:97
                            },
                            {
                                date: '2016',
                                name: '李岩',
                                sex: '男',
                                address: '西安市长安区',
                                from:'中国',
                                height:'177cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:94
                            },
                            {
                                date: '2012',
                                name: '张灏之',
                                sex: '男',
                                address: '西安市长安区',
                                from:'中国',
                                height:'176cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:88
                            },
                            {
                                date: '2008-05-01',
                                name: '罗晓磊',
                                sex: '男',
                                address: '西安市雁塔区',
                                from:'中国',
                                height:'175cm',
                                weight:'65kg',
                                hobby:'basketball',
                                grade:76
                            }
                        ],
                        flex: 600, // 设置表格高度
                        minHeight: 300, // 表格最低高度
                        height:'100%',
                        border:true, // 表格边框
                        checkbox:false, // 表格选择框
                        defaultsort:{ // 默认排序的列，以及排序的顺序是升序还是降序
                            prop: 'date',
                            order: 'descending'
                        },
                        rowBtn: [ // 行内操作
                            {
                                eName:'isPublish',
                                btnType:'text',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'更新',
                                iconLeft:'',
                                iconRight:''
                            },
                            {
                                eName:'isDelete',
                                btnType:'text',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'删除',
                                iconLeft:'',
                                iconRight:''
                            }
                        ]
                    },
                    intf:{
                        tableData:{
                            path: '',
                            method: 'post'
                        },
                    },
                    intf_eName_conf:[
                        {
                            name:'getTableData',
                            params:'获取表格数据'
                        }
                    ],
                    cross_parameter_name: 'mr',
                    event_ele_conf:`{
                        handleFun:function(data){ // 选中的行数据
                            console.log(data);
                        },
                        formatFun:function(row, column){ // 数据格式化
                            if(column.property === 'date') {
                                debugger
                                return row.date = row.date.slice(0,4);
                            } else {
                                return row[column.property];
                            }
                        },
                        sortFun:function(a,b){ // 自定义排序规则
                            return a.grade -b.grade;
                        },
                        filterFun:function(value, row, column){ // 自定义筛选规则
                            const property = column['property'];
                            return row[property] === value;
                        },
                        isPublish:function(data){
                            console.log(data)
                            debugger
                        },
                        isDelete:function(data){
                            console.log(data)
                            debugger
                        },
                        mounted:function () {
                        }
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data () {
        return {
            flexHeight: '',
            tableData:{
                data:{}
            }
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            try{
                this.tableData.data = new Function(`return ${this.datas.attr_data_conf}`)()
                const mh = document.documentElement.clientHeight - this.tableData.data.flex > this.tableData.data.minHeight
                ? document.documentElement.clientHeight - this.tableData.data.flex : this.tableData.data.minHeight
                this.flexHeight = mh + 'px';
            }catch(err){
                this.tableData.data = JSON.parse(this.datas.attr_data_conf)
                const mh = document.documentElement.clientHeight - this.tableData.data.flex > this.tableData.data.minHeight
                ? document.documentElement.clientHeight - this.tableData.data.flex : this.tableData.data.minHeight
                this.flexHeight = mh + 'px';
            }
        }else{
            this.tableData.data = this.datas.attr_data_conf;
            const mh = document.documentElement.clientHeight - this.tableData.data.flex > this.tableData.data.minHeight
            ? document.documentElement.clientHeight - this.tableData.data.flex : this.tableData.data.minHeight
            this.flexHeight = mh + 'px';
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        Object.keys(extraMethods).forEach(key => {
            if(key!=='mounted'){
                this[key] = extraMethods[key].bind(this);
            }
        });
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){//处理事件配置中的mounted
            extraMethods.mounted.bind(this)();
        }
        // 如果配置了flex属性, 则在组件加载完成后配置一个reisze监听,保证表格的高度为动态计算
        if (this.tableData.data.flex !== 0) {
            window.addEventListener('resize', this._initTableSize);
        } else {
            this.flexHeight = 'auto';
        }
    },
    beforeDestroy () {
        window.removeEventListener('resize', this._initTableSize);
    },
    methods: {
        _initTableSize () {
            const vm = this
            let timer = null
            // 这里增加一个延迟不会触发频次太高,减少开销
            if (timer) return
            timer = setTimeout(() => {
                const mh = document.documentElement.clientHeight - vm.tableData.data.flex > this.tableData.data.minHeight
                ? document.documentElement.clientHeight - vm.tableData.data.flex
                : this.tableData.data.minHeight;
                vm.flexHeight = mh + 'px';
                timer = null;
            }, 300)
        },
        // 当选择项发生变化时会触发该事件
        handleSelectionChange(sel){
            return this.handleFun(sel);
        },
        // 单元格数据格式化处理
        formatterData(row, column) {
            debugger
            return this.formatFun(row, column);
        },
        // 自定义排序规则
        sortMethod(a,b){
            return this.sortFun(a,b);
        },
        // 自定义筛选规则
        filterHandler(value, row, column) {
            return this.filterFun(value, row, column);
        },
        rowBtnClick(row,eName){
            this[eName](row)
        }
    }
}
</script>
<style lang="less" scoped>
.tableExpand{
    .el-col{
        white-space: nowrap;
        .el-form-item__label{
            font-weight:bold;
            color:#409EFF;
            line-height: 30px;
        }
        .el-form-item{
            width:100%;
            margin-bottom:0;
            .el-form-item__content{
                width:100%;
                line-height:30px;
                height:30px;
                .el-form-item__label{
                    line-height:30px;
                }
                .table-inline{
                    width:200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>

